<template>
  <div class="journal" id="journal">
    <div class="tips">
      操作说明
      <a-tooltip placement="rightBottom">
        <template #title>
          操作说明：安全员可以审计非安全员及审计员的管理员的操作日志；审计员可以审计非审计员的管理员的操作日志。</template
        >
        <span class="iconfont icon-hint1"></span>
      </a-tooltip>
    </div>
    <div class="selectBox">
      <div>
        <span>用户名：</span>
        <a-input
          v-model:value="params.operateUser"
          placeholder="请输入用户名"
          style="width: 200px;height:31px"
          @blur="onSearch"
          @pressEnter="onSearch"
          allow-clear
        >
        <template #suffix>
            <i
              class="iconfont icon-search"
              @click="onSearch"
            ></i>
          </template>
        </a-input>
      </div>
      <div>
        <span>操作时间：</span>
        <date-range-picker
          v-model:value="timeValue"
          :valueFormat="valueFormat"
          :showTime="false"
          :disabledInfo="disabledInfo"
          @change="changeTime"
          style="width: 240px"
        ></date-range-picker>
      </div>
      <div>
        <span>客户端IP：</span>
        <a-input
          v-model:value="params.clientIp"
          placeholder="请输入客户端IP"
          style="width: 200px;height:31px"
          allow-clear
          @pressEnter="onSearch"
          @blur="onSearch"
        ><template #suffix>
            <i
              class="iconfont icon-search"
              @click="onSearch"
            ></i>
          </template></a-input>
      </div>
      <div>
        <span>事件子类型：</span>
        <a-input
          v-model:value="params.subEventType"
          placeholder="请输入事件子类型"
          style="width: 200px;height:31px"
          allow-clear
          @pressEnter="onSearch"
          @blur="onSearch"
        >
        <template #suffix>
            <i
              class="iconfont icon-search"
              @click="onSearch"
            ></i>
          </template>
        </a-input>
      </div>
      <div v-show="!isOpen">
        <span>日志级别：</span>
        <a-select
          placeholder="请选择"
          class="userSecret"
          style="width: 200px"
          v-model:value="params.logLevel"
          :options="logLevelData"
          allow-clear
          @change="onSearch"
        ></a-select>
      </div>
      <div v-show="!isOpen">
        <span>操作类型：</span>
        <a-select
          placeholder="请选择"
          class="userSecret"
          style="width: 200px"
          v-model:value="params.operateType"
          :options="operateTypeData"
          allow-clear
          @change="onSearch"
        ></a-select>
      </div>
      <div v-show="!isOpen">
        <span>操作结果：</span>
        <a-select
          placeholder="请选择"
          class="userSecret"
          style="width: 200px"
          v-model:value="params.requestResult"
          :options="requestResultData"
          allow-clear
          @change="onSearch"
        ></a-select>
      </div>
      <div class="cz">
        <!-- <a-button
          :style="{ 'margin-left': '8px' }"
          class="addButton"
          type="primary"
          @click="onSearch()"
        >
         
          搜索</a-button
        > -->
        <a-button
          :style="{ 'margin-left': '8px' }"
          class="addButton"
          :disabled="!btnPerm.includes('exportAble')"
          type="primary"
          @click="onExport()"
          >导出</a-button
        >
        <div class="openorclose" @click="openorclose" v-show="!isOpen">
          <a>收起</a>
          <i class="iconfont icon-up" style="font-size: 24px"> </i>
        </div>
        <div class="openorclose" @click="openorclose" v-show="isOpen">
          <a>展开</a>
          <i class="iconfont icon-down" style="font-size: 24px"> </i>
        </div>
      </div>
    </div>
    <!-- 表格展示部分 -->
    <baseTable
      :columns="columns_audit"
      :dataSource="configData.records"
      :isSelect="true"
      :scroll="scroll"
      ref="tagBaseTables"
      :isShowPagination="isShowPagination"
      :rowSelection="1"
      :total="configData.total"
      @changePage="changePage"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column">
            <span>{{ text }}</span>
          </table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'logCategory'">
          <span>{{ logCategory(text) }}</span>
        </template>
        <template v-if="column.dataIndex === 'eventType'">
          <span>{{ eventType(text) }}</span>
        </template>
        <template v-if="column.dataIndex === 'logLevel'">
          <span>{{ logLevel(text) }}</span>
        </template>
        <template v-if="column.dataIndex === 'operateType'">
          <span>{{ operateType(text) }}</span>
        </template>
        <template v-if="column.dataIndex === 'requestResult'">
          <span>{{ requestResult(text) }}</span>
        </template>
      </template>
    </baseTable>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, reactive, nextTick } from "vue";
import request from "@/api/index";
import baseTable from "@/components/table/baseTable.vue";
import columns from "@/components/table/tableConfig/tableColumn/systemTableColumn";
import { getTableScroll } from "@/components/table/tableConfig/table";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { message, SelectProps } from "ant-design-vue";
import dateRangePicker from "@/components/picker/dateRangePicker.vue";
import globalFun from "@/utils/global";
import {routerPerm} from '@/utils/common';
// interFace
interface dataSourceType {
  [propName: string]: any;
}
//data
const btnPerm = ref<any[]>([]);
let columns_audit = ref(JSON.parse(JSON.stringify(columns.userLogColumns)));
const logLevelData = ref([
  //日志级别
  {
    value: null,
    label: "所有",
  },
  {
    value: 1,
    label: "高",
  },
  {
    value: 2,
    label: "中",
  },
  {
    value: 3,
    label: "低",
  },
]);
const operateTypeData = ref([
  //操作类型
  {
    value: null,
    label: "所有",
  },
  {
    value: 1,
    label: "查询",
  },
  {
    value: 2,
    label: "新增",
  },
  {
    value: 3,
    label: "修改",
  },
  {
    value: 4,
    label: "删除",
  },
  {
    value: 5,
    label: "导出",
  },
  {
    value: 6,
    label: "导入",
  },
  {
    value: 7,
    label: "上传",
  },
  {
    value: 8,
    label: "下载",
  },
  {
    value: 9,
    label: "登录",
  },
  {
    value: 10,
    label: "退出",
  },
]);

const requestResultData = ref([
  //操作结果
  {
    value: null,
    label: "所有",
  },
  {
    value: 1,
    label: "成功",
  },
  {
    value: 2,
    label: "失败",
  },
]);
const logCategory = (key: number) => {
  // 日志类别
  return key == 1
    ? "系统"
    : key == 2
    ? "业务"
    : key == 3
    ? "审计"
    : key == 4
    ? "安全"
    : key == 5 && "告警";
};
const eventType = (key: number) => {
  // 事件类型
  return key == 1 ? "系统" : key == 2 && "业务";
};
// 日志级别
const logLevel = (key: number) => {
  let data = "";
  logLevelData.value.map((item: any) => {
    if (item.value == key) {
      data = item.label;
    }
  });
  return data;
};
// 操作类型
const operateType = (key: number) => {
  let data = "";
  operateTypeData.value.map((item: any) => {
    if (item.value == key) {
      data = item.label;
    }
  });
  return data;
};
// 操作结果
const requestResult = (key: number) => {
  let data = "";
  requestResultData.value.map((item: any) => {
    if (item.value == key) {
      data = item.label;
    }
  });
  return data;
};
const disabledInfo = reactive({
  //日期禁选
  type: 2,
  startDays: 0,
});
const OrgData = ref<dataSourceType[]>([]);
const selectOption = ref("");
//表格
let scroll: dataSourceType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const configData = reactive({
  records: [],
  total: "",
});
const valueFormat = ref("YYYY-MM-DD");
const timeValue = ref<(string | number)[]>([]);
const isShowPagination = ref(true);
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(10);
const isOpen = ref<boolean>(true); //是否展开或收起.
let rowSelection = ref<(string | number)[]>([]);
const tagBaseTables = ref<any>({
  selectedRowKeys: [],
});

const params = ref<any>({
  operateUser: null,
  beginDate: null,
  endDate: null,
  clientIp: null,
  subEventType: null,
  logLevel: null,
  operateType: null,
  requestResult: null,
});
// onMounted
onMounted(() => {
  btnPerm.value = routerPerm()
  fetchReinsuranceUserLogPage({});
});
watch(
  () => tagBaseTables.value.selectedRowKeys,
  (newVal, oldVal) => {
    rowSelection.value = newVal;
  },
  { deep: true }
);
//methods
// 搜索
const onSearch = () => {
  nextTick(() => {
    fetchReinsuranceUserLogPage(params.value);
  });
};
// 导出
const onExport = () => {
  nextTick(() => {
    request
      .fetchReinsuranceUserLogExport(params.value)
      .then((res: any) => {
        globalFun.downloadFile(res, "用户日志.xls");
      })
      .catch((err: any) => {
        console.log(err, 9999);
      });
  });
};

//展示或者隐藏筛选框
const openorclose = () => {
  isOpen.value = !isOpen.value;
};
// 时间选择
const changeTime = (data: any) => {
  params.value.beginDate = data ? data[0] : null;
  params.value.endDate = data ? data[1] : null;
  onSearch()
};
// 获取用户密级设置
const fetchReinsuranceUserLogPage = async (datas: dataSourceType) => {
  tagBaseTables.value.selectedRowKeys = [];
  const data: dataSourceType = {
    pageNumber: datas.pageNumber || pageCurrent.value,
    pageSize: datas.pageSize || pageSize.value,
    ...params.value,
  };
  selectOption.value ? (data.moduleType = selectOption.value) : "";
  const telData = (await request.fetchReinsuranceUserLogPage(data)) || {};

  let reqData = telData;
  configData.total = reqData.total;
  configData.records = reqData.records;
  configData.records?.map(
    (item: dataSourceType, index: number) =>
      (item.key = item.id) && (item.index = index + 1)
  );
  nextTick(() => {
    let obj = getTableScroll(74, "journal", 210);
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
};

//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: dataSourceType = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
  fetchReinsuranceUserLogPage(datas);
};
</script>
<style lang="less" scoped>
.journal {
  min-width: 1280px;
  .addButton {
    display: flex;
    align-items: center;
    margin-right: 8px;

    .iconadd {
      font-size: 24px;
      margin-right: 4px;
    }
  }
  .selectBox {
    margin: 24px 0;

    padding: 8px 24px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: row;
    // justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    background: rgba(0, 0, 0, 0.02);
    > div {
      margin-top: 16px;
      margin-right: 24px;
      display: flex;
      align-items: center;
      // width: 360px;
      > span {
        // margin-right: 16px;
        width: 85px;
        text-align: right;
        font-size: 14px;
      }
    }

    .ant-select,
    .ant-input,
    .ant-picker {
      width: 220px !important;
    }
    .cz {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      // margin-bottom: 24px;
      width: 354px;
    }
    .openorclose {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 16px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1f6ded;

      .iconfont {
        margin-left: 5px;
      }
    }
  }
  :deep(.ant-table-thead .ant-table-cell:nth-last-of-type(1)) {
    text-align: left;
    margin-right: 0px;
  }
  :deep(.ant-table-row .ant-table-cell:nth-last-of-type(1)) {
    text-align: left;
    margin-right: 0px;
  }
}
</style>
<style lang="less">
.userSecret {
  width: 200px;
}
.journal {
  min-width: 1280px;
  .tips {
    margin-bottom: 16px;
  }
  padding: 16px;
  background: #fff;
  height: calc(100% - 120px);

  .options {
    display: flex;
    padding: 24px 0;
    align-items: center;
    font-size: 14px;

    .options_label {
      margin-right: 12px;
    }

    .options_content {
      border: 1px solid var(--theme_button_bg_color, #1f6ded);
      display: flex;
      border-radius: 4px;

      span {
        padding: 4px 14px;
        color: #333;
        border-right: 1px solid var(--theme_button_bg_color, #1f6ded);
      }

      span:nth-last-of-type(1) {
        border-right: none;
      }

      span:hover {
        background: var(--theme_button_hover_bg_color, #4892fa);
        border-color: var(--theme_button_hover_bg_color, #4892fa);
        color: #fff;
      }

      .activeOption {
        color: #fff;
        background: var(--theme_button_bg_color, #1f6ded);
      }
    }
  }

  .eidtRecords {
    margin-right: 12px;
  }

  .ant-table-row {
    .ant-table-cell:nth-last-of-type(1) {
      text-align: right;
    }
  }
}
</style>
